import { onMounted, nextTick, getCurrentInstance, ref } from "vue";
import "./index.scss";
export default {
  setup() {
    const myChart = ref(null);
    const echartsInstance = ref(null);
    const globalProperties =
      getCurrentInstance().appContext.config.globalProperties;
    const { $echarts, $fitChartSize } = globalProperties;
    const getEchart = () => {
      echartsInstance.value = $echarts.init(myChart.value);
      const option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        grid: {
          left: $fitChartSize(10),
          right: $fitChartSize(20),
          top: $fitChartSize(20),
          bottom: $fitChartSize(10),
          containLabel: true,
        },
        calculable: true,
        series: [
          {
            color: ["#0db1cdcc"],
            name: "计划投入",
            type: "funnel",
            width: "45%",
            height: "70%",
            x: "5%",

            minSize: "10%",
            funnelAlign: "right",

            center: ["50%", "50%"], // for pie

            data: [
              {
                value: 30,
                name: "下单30%",
              },
              {
                value: 55,
                name: "咨询55%",
              },
              {
                value: 65,
                name: "点击65%",
              },
              {
                value: 60,
                name: "访问62%",
              },
              {
                value: 80,
                name: "展现80%",
              },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: true,
            label: {
              normal: {
                formatter: function () {},
                position: "inside",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                shadowBlur: $fitChartSize(20),
                shadowOffsetX: 0,
                shadowOffsetY: $fitChartSize(5),
                shadowColor: "rgba(0, 0, 0, 0.3)",
              },
            },
          },

          {
            color: ["#0C66FF"],
            name: "实际投入",
            type: "funnel",
            width: "45%",
            height: "70%",
            x: "50%",

            minSize: "10%",
            funnelAlign: "left",

            center: ["50%", "50%"], // for pie

            data: [
              {
                value: 35,
                name: "下单35%",
              },
              {
                value: 40,
                name: "咨询40%",
              },
              {
                value: 70,
                name: "访问70%",
              },
              {
                value: 90,
                name: "点击90%",
              },
              {
                value: 95,
                name: "展现95%",
              },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: true,
            label: {
              normal: {
                position: "inside",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                shadowBlur: $fitChartSize(20),
                shadowOffsetX: 0,
                shadowOffsetY: $fitChartSize(5),
                shadowColor: "rgba(0, 0, 0, 0.3)",
              },
            },
          },
        ],
      };
      echartsInstance.value.setOption(option, true);
    };

    onMounted(() => {
      nextTick(() => {
        getEchart();
      });
    });

    window.addEventListener("resize", () => {
      nextTick(() => {
        echartsInstance.value.resize();
        echartsInstance.value.clear(); //消除当前实例
        getEchart();
      });
    });

    return () => <div ref={myChart} class="chartsdom"></div>;
  },
};
